<template>
  <div>
    <!-- 第一行 -->
    <el-card style="height: 600px; margin: 10px">
      <el-row :gutter="24">
        <el-col :span="10">
          <el-card style="height:280px;">
            <div
              class="clearfix"
              style="float:left;"
            >
              <span
                class="title"
                style="writing-mode:vertical-rl;float:left;margin-top:40px;font-size:20px;"
              >{{$t('statistics_payment_paymentdetails_366')}}</span>
            </div>
            <div
              ref="promotionRateChart"
              style="width: 500px; height: 280px; margin-top: -30px;margin-left:125px;"
            />
          </el-card>
          <el-card style="height:280px;">
            <div
              class="clearfix"
              style="float:left;"
            >
              <span
                class="title"
                style="writing-mode:vertical-rl;float:left;margin-top:30px;font-size:20px;"
              >{{$t('statistics_payment_paymentdetails_367')}}</span>
            </div>
            <div
              ref="payTypeRateChart"
              style="width: 500px; height: 280px;"
            />
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card>
            <div
              slot="header"
              class="clearfix"
            >
              <span class="title">{{$t('statistics_payment_paymentdetails_368', [ monthPromotionTimeFormattedyear ,
                  monthPromotionTimeFormattedmonth
                ])}}</span>
              <el-date-picker
                v-model="monthPromotionTimeDate"
                type="month"
                :picker-options="{disabledDate:disabledTime}"
                @change="
                  handleDateChange(monthPromotionTimeDate, 'monthPromotionTime')
                "
              />
            </div>
            <div
              ref="promotionTimeChart"
              style="width: 550px; height: 440px"
            />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 第二行 -->
    <el-card style="height: 570px; margin: 10px">
      <div
        slot="header"
        class="clearfix"
      >
        <span class="title">{{$t('statistics_payment_paymentdetails_369', [ monthavgPromotionFormattedyear ])}}</span>
        <el-date-picker
          v-model="monthavgPromotionDate"
          type="year"
          :picker-options="{disabledDate}"
          @change="handleDateChange(monthavgPromotionDate, 'monthavgPromotion')"
        />
      </div>
      <div
        ref="avgPromotionChart"
        style="width: 510px; height: 450px;height: 480px; margin-top: -20px;float:left;"
      />
      <div
        ref="avgPromotionChart1"
        style="width: 510px; height: 480px; margin-top: -20px;float:right;"
      />
    </el-card>
  </div>
</template>
<script>
import {getPromotionRate,getMonthlyPromotionAmount,getPromotionTimeData,getAvaliableDate,getAvaliableTime,getPayTypeRate}from "@/api/dashboard";
export default {
  name: "PaymentDetails",
  data() {
    return {
      //可用日期
      availableYears:[],
      availableTimes:[],
      payTypeRate:[],
      promotionRate: 0,
      // 日期列表
      monthList:[this.$t('statistics_payment_paymentdetails_370'),this.$t('statistics_payment_paymentdetails_371'),this.$t('statistics_payment_paymentdetails_372'),this.$t('statistics_payment_paymentdetails_373'),this.$t('statistics_payment_paymentdetails_374'),this.$t('statistics_payment_paymentdetails_375'),this.$t('statistics_payment_paymentdetails_376'),this.$t('statistics_payment_paymentdetails_377'),this.$t('statistics_payment_paymentdetails_378'),this.$t('statistics_payment_paymentdetails_379'),this.$t('statistics_payment_paymentdetails_380'),this.$t('statistics_payment_paymentdetails_381')],
      // 时间选择器选择年份
      //月优惠次数时间
      monthPromotionTimeDate: new Date(),
      monthPromotionTimeFormattedyear: null,
      monthPromotionTimeFormattedmonth: null,
      //月平均优惠额时间
      monthavgPromotionDate: new Date(),
      monthavgPromotionFormattedyear: null,
      // 仪表盘
      // 支付方式比例
      payTypeRateChart:null,
      payTypeRateOption:null,
       // 订单优惠率
      promotionRateOption:null,
      promotionRateChart:null,
      // 优惠次数
      promotionTimeChart:null,
      promotionTimeOption:null,
      // 平均优惠额
      avgPromotionChart:null,
      avgPromotionOption:null,
      avgPromotionOption1:null,
      avgPromotionChart1:null,
      //月平均优惠额
      promotionTotal:[],
      // 平均优惠次数
      promotionTimeDate:[],
    };
  },
  computed: {},
  created() {
    this.initDateFormats(this.monthPromotionTimeDate, "monthPromotionTime");
    this.initDateFormats(this.monthavgPromotionDate, "monthavgPromotion");
    // 获取可用年份日期
    getAvaliableDate().then((response) => {
      this.availableYears=response.data
    });
    // 
    getAvaliableTime().then((response) => {
      this.availableTimes=response.data
    });
    // 获取支付方式比例
    getPayTypeRate().then((response)=>{
      // console.log(response)
      this.payTypeRate=response.data
      this.initEcharts()
    });
    // 获取订单优惠率
    getPromotionRate().then((response)=>{
      this.promotionRate=response.data;
      this.initEcharts()
    });
    // 获取年月平均优惠次数
    getPromotionTimeData(this.monthPromotionTimeFormattedyear,this.monthPromotionTimeFormattedmonth).then((response)=>{
      this.promotionTimeDate=response.data;
      this.initEcharts();
    });
    // 获取平均优惠额
    getMonthlyPromotionAmount(this.monthavgPromotionFormattedyear).then((response)=>{
      this.promotionTotal=response.data.data;
      this.initEcharts();
    });
    
  },
  mounted() {
    // this.initEcharts();
  },
  methods: {
    disabledDate(date) {
      // 得到当前要查月份的年份
      const year = date.getFullYear();
      // 如果日期不在可用日期列表中，则返回 true 以禁用该日期
      return !this.availableYears.includes(year);
    },
    disabledTime(date){
          // 获取当前日期和月份  
          const currentDate = new Date();  
          const currentMonthStr = (currentDate.getMonth() + 1).toString();  
          const currentMonth = parseInt(currentMonthStr, 10);  
          const currentYearMonth = `${currentDate.getFullYear()}-${currentMonth < 10 ? '0' + currentMonth : currentMonth}`;  
        
          // 如果 availableTimes 数组不包含当前月份，则添加它  
          if (!this.availableTimes.includes(currentYearMonth)) {  
              this.availableTimes.push(currentYearMonth);  
          }  
          const monthStr = (date.getMonth() + 1).toString();
          const month = parseInt(monthStr, 10); // 将月份字符串转换为数字  
          const yearMonth = `${date.getFullYear()}-${month < 10 ? '0' + month : month}`;
          return !this.availableTimes.includes(yearMonth);
    },
    handleDateChange(newValue, type) {
      if (newValue) {
        const year = newValue.getFullYear();
        const month = String(newValue.getMonth() + 1).padStart(2, "0");
        if (type === "monthPromotionTime") {
          this.monthPromotionTimeFormattedyear = year;
          this.monthPromotionTimeFormattedmonth = month;
          getPromotionTimeData(year,month).then((response)=>{
            this.promotionTimeDate=response.data;
            this.promotionTimeChart.setOption({
              series: [
                {
                  name: this.$t('statistics_payment_paymentdetails_382'),
                  type: "pie",
                  radius: "50%",
                  data: this.promotionTimeDate,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            })
        });
        } else if (type === "monthavgPromotion") {
          this.monthavgPromotionFormattedyear = year;
          getMonthlyPromotionAmount(year).then((response)=>{
          this.promotionTotal=response.data.data;
          this.avgPromotionChart.setOption({
            xAxis: {
              type: "category",
              data: this.monthList
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: this.promotionTotal,
                type: "bar",
                showBackground: true,
                backgroundStyle: {
                  color: "rgba(180, 180, 180, 0.2)",
                },
              },
            ],
          })
        });
        }
      }
    },
    initDateFormats(date, type) {
      if (date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");

        if (type === "monthPromotionTime") {
          this.monthPromotionTimeFormattedyear = year;
          this.monthPromotionTimeFormattedmonth = month;
        } else if (type === "monthavgPromotion") {
          this.monthavgPromotionFormattedyear = year;
        }
        else if (type === "monthavgPromotion") {
          this.monthavgPromotionFormattedyear = year;
        }
      }
    },
    initEcharts() {
      // 优惠率
      this.promotionRateChart = this.$echarts.init(
        this.$refs.promotionRateChart
      );
      this.promotionRateChart.resize({
        width:260
      })
      const gaugeData = [
        {
          value: this.promotionRate.toFixed(2),
          title: {
            offsetCenter: ["0%", "-15%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "10%"],
          },
        },
      ];
      this.promotionRateOption = {
        color:["#91cc75"],
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
            },
            axisLine: {
              lineStyle: {
                width:35,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 24,
            },
            detail: {
              width: 100,
              height: 30,
              fontSize:34,
              color: "inherit",
              formatter: "{value}%",
            },
          },
        ],
      };
      this.promotionRateOption && this.promotionRateChart.setOption(this.promotionRateOption);
      // 支付方式比例
      this.payTypeRateChart=this.$echarts.init(
        this.$refs.payTypeRateChart
      );
      this.payTypeRateOption = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        color:["#ee6666","#73c0de","#e4d0ed","#e5c4c4"],
        series: [
          {
            name: this.$t('statistics_payment_paymentdetails_383'),
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 15,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.payTypeRate
          }
        ]
      }
      this.payTypeRateOption && this.payTypeRateChart.setOption(this.payTypeRateOption);

      // 优惠次数
      this.promotionTimeChart = this.$echarts.init(
        this.$refs.promotionTimeChart
      );
      this.promotionTimeChart.resize({
        width: 550,
        height: 550,
      });
      this.promotionTimeOption = {
        color:["#d2d9f2","#b8dedd","#ea7ccc","#9a60b4","#ee6666","#73c0de","#9a60b4","#fc8452"],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: this.$t('statistics_payment_paymentdetails_382'),
            type: "pie",
            radius: "50%",
            data: this.promotionTimeDate,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.promotionTimeOption && this.promotionTimeChart.setOption(this.promotionTimeOption);

      
      // 平均优惠额柱状图
      this.avgPromotionChart = this.$echarts.init(this.$refs.avgPromotionChart);
      this.avgPromotionChart.resize({
        width: 530,
        height: 500,
      });
      this.avgPromotionOption = {
        color:["#f7d678"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.monthList
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.promotionTotal,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      this.avgPromotionOption && this.avgPromotionChart.setOption(this.avgPromotionOption);
      
      // 平均优惠额折线图
      this.avgPromotionChart1 = this.$echarts.init(this.$refs.avgPromotionChart1);
      this.avgPromotionChart1.resize({
        width: 530,
        height: 500,
      });
      this.avgPromotionOption1 = {
        color:["#ebb264"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: this.monthList
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.promotionTotal,
            type: "line",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      this.avgPromotionOption1 && this.avgPromotionChart1.setOption(this.avgPromotionOption1);
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -10px;
  font-size: 18px;
  font-weight: bold;
  // font-size:large;
  color: rgb(86, 83, 83);
}
</style>